@import "../common/vars.scss";
@import "../mixins/mixins.scss";
@include create(notice){
    width: $notice-width;
    @include m(top-right){
        position: fixed;
        top: 20px;
        right: 25px;
        z-index: $notice-default-zindex;
    }
    @include m(item){
        position: relative;
        box-sizing: border-box;
        width:$notice-width;
        padding:$notice-padding;
        height: auto;
        background:$notice-item-background;
        border-radius:$border-radius-base;
        border:$border-base;
        color:$notice-item-text-color;
        font-size:$font-size-base;
        box-shadow:$box-shadow-base;
        transition: $notice-transition;
        margin-bottom: 10px;
        border-left: 4px solid $color-primary;
    }
    @include m(text){
        min-width:$notice-text-min-width;
        padding:0 10px;
        width:100%;
        .aiui-notice-title{
            font-weight: bold;
            font-size: $font-size-base+2;
        }
        .aiui-notice-message {
            margin: $notice-message-margin;
            line-height: $notice-text-line-height/2;
            color: $color-text-regular;
        }
    }
    @include m(icon){
        div {
            width: $notice-text-line-height;
            height: $notice-text-line-height;
            color: $color-white;
            text-align: center;
            line-height: $notice-text-line-height;
            border-radius: 50%;
        }
    }
    @include m(info){
        background: $color-primary;
    }
    @include m(success){
        background: $color-success;
    }
    @include m(warning){
        background: $color-warning;
    }
    @include m(error){
        background: $color-danger;
    }
    @include m(close){
        position: absolute;
        right: 15px;
        top: 15px;
        text-align: center;
        vertical-align: top;
        cursor: pointer;
        &:hover{
            color: $color-primary;
        }
    }
}

.aiui-notice-fade-enter.right {
    right: 0;
    transform: translateX(100%);
  }
  .aiui-notice-fade-enter.left {
    left: 0;
    transform: translateX(-100%);
  }
  .aiui-notice-fade-leave-active {
    opacity: 0;
  }